<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app" v-cloak>
        <div>{{ msg }}</div>
        <div v-text="msg"></div>
        <div v-html="msg"></div>
        <div>
            <!-- 双向数据绑定 -->
            <input type="text" v-model="msg">
        </div>
        <div>
            <button @click="trigger_click($event, 'aaa', 'bbb')">click</button>
        </div>
        <div>
            <input type="text" v-model="username" @keyup.delete="username='';" />
        </div>
        <div>
            <!--计算器-->
            <input type="text" v-model="a"/> + <input type="text" v-model="b"/> <button @click="c=parseInt(a)+parseInt(b);"> = </button> <input type="text" v-model="c"/>
        </div>
        <div>
            <!--动态属性的绑定-->
            <input type="text" :value="href">
            <input type="text" v-model="href">
            <a :href="href">{{ href }}</a>
            <button @click="href='http://www.baidu.com'">切换</button>
        </div>


        <div>
            <!--切换选项-->
            <div class="container" style="margin-top:50px;">
                <ul class="options">
                    <li :class="['option', {active: index == show_index}]" v-for="(value, index) in options" @click="click_tab($event, index)">{{ value }}</li>
                </ul>
                <ul class="options-detail">
                    <li :class="[{'option-detail': index != show_index}, {'active-detail': index == show_index}]" v-for="(value, index) in options">{{ value }}</li>
                </ul>
            </div>
        </div>
        <div>
            <!--自定义指令-->
            <input type="text" v-yzc />
            <input type="text" v-color="colors">
        </div>
        <div>
            <!--自动属性-->
            <input type="text" v-color="colors.color" v-model="colors.color" />
            <p>{{ computedAttr }}</p>
        </div>
        <div>
            <!--侦听器-->
            <input type="text" v-model="first"/><br/>
            <input type="text" v-model="last"/><br/>
            {{ full_name }}
        </div>
        <div>
            <!--用户名可否使用-->
            <input type="text" v-model="username" />{{tips}}
        </div>
        <div>
            <!--过滤器-->
            <input type="text" v-model="filter" />
            {{filter | upper}}
        </div>
        <div>
            <!--  组件：计数器  -->
            <number-counter></number-counter>
            <number-counter></number-counter>

            <my-component :title="full_name" menu-item="aaaa"></my-component>
            <my-component title="来自父组件的值"  menu-item="在js是驼峰法，到html上必须是短横线"></my-component>

            <!-- 通过事件通知父组件 -->
            <p :style="{fontSize: size + 'px'}">aaa</p>
            <emit @large="large"></emit>

            <!-- 兄弟组件通信 -->
            <brother-tag from="tom" to="jerry" :step=1></brother-tag>
            <brother-tag from="jerry" to="tom" :step=2></brother-tag>
            <button @click="cancel">取消兄弟组件通信</button>
            <button @click="cancel"></button>

            <!--组件插槽-->
            <slot-tag>我是组件插槽值</slot-tag>
            <slot-tag></slot-tag>
        </div>
    </div>
</body>
<style>
    *{padding:0;margin:0;}
    li{list-style: none;}
    .option-detail{display: none;}
    .active-detail{width:298px;background-color: #0D9BF2;height:300px;color:whitesmoke;font-size:50px;display: flex;flex-direction:column;justify-content:center;text-align: center;}
    .options-detail{margin: 0 auto;width:298px;height:300px;}
    .options{margin: 0 auto;width:300px;display: flex;flex-direction:row;justify-content:center;color:#2F4056;color:whitesmoke;}
    .option{flex: 1;text-align: center;border: solid 1px snow;background-color: #c8c8cd;border-bottom: none;}
    .active{background-color:#0D9BF2;}
    .option:hover{background-color: #0D9BF2;}
</style>
<style type="text/css">
    [v-cloak]{
        display: none;
    }
</style>
<script src="./vue.js"></script>
<script>
    const hub = new Vue();
    const SlotTag = {
        template: `
            <div>
                <strong>提醒</strong>
                <slot>有个错误发生了</slot>
</div>
        `
    };
    const Brother = {
        data: function(){
            return {
              count: 0
            };
        },
        props: ['from', 'to', 'step'],
        template: `
            <div>
                <p>{{ from }} : {{ count }}</p>
                <button @click="handle">触发</button>
            </div>
        `,
        methods: {
            handle: function(){
                hub.$emit(this.from + "_event", this.step)
            }
        },
        mounted(){
            hub.$on(this.to + "_event", val => this.count += val);
        }
    };
    const Emit = {
        template: `
            <div>
                <button @click="$emit('large', 123, 'aaa')">扩大字体</button>
            </div>
`
    };
    Vue.component("number-counter", {
        data: function(){
            return {
                count: 0
            };
        },
        template: `<div><button @click="count++">你已经按了{{ count }}次</button></div>`
    });

    let myComponent = {
        props:['title', 'menuItem'],
        data: function() {
            return {
                msg: 'I am in myComponent'
            }
        },
        template: `
            <div>
                <div>{{ msg }}</div>
                <div>{{ title }}</div>
                <div>{{ menuItem }}</div>
                <number-counter></number-counter>
            </div>
        `
    };

    Vue.directive('yzc', {
        inserted: function(el)
        {
            el.value="aaaa";
        }
    });

    Vue.filter('upper', function(val){
        return val.charAt(0).toUpperCase() + val.slice(1);
    });
    const app = new Vue({
        el: "#app",
            data: {
            msg: '<div style="color:red">我是message</div>',
            username: "" ,
            a: "",
            b: "",
            c: "",
            href: "http://sina.com",
            show_index: 0,
            options: ["香蕉", "苹果", "橘子"],
            colors:{
                color: 'pink',
            },
            first: '王',
            last: '明',
            full_name: '王明',
            tips: '',
            filter: 'abcv',
            size: 16,
        },
        components: {
            "my-component" : myComponent,
            "emit": Emit,
            "brother-tag": Brother,
            "slot-tag": SlotTag
        },
        watch:{
            username: function(val){
                this.check_username(val);
                this.tips = '正在验证该用户名是否可用';
            },

            first: function(val){
              this.full_name = val + this.last;
            },
            last: function(val){
              this.full_name = this.first + val;
            }
        },
        computed:{
            computedAttr: function(){
                console.log(this.colors.color);
              return this.colors.color.split('').reverse().join('');
          }
        },
        directives:{
            color:{
              inserted: function(el, binding)
              {
                  el.style.backgroundColor = binding.value.color;
              },
              update: function(el, binding)
              {
                  el.style.backgroundColor = binding.value.color;
              }
            }
        },
        methods: {
            cancel: function(){
                hub.$off('tom_event');
                hub.$off('jerry_event');
            },
            large: function(a, b){
                this.size += 5;
                console.log(a);
                console.log(b);
            },
            check_username: function(value){
                let that = this;
                setTimeout(function(){
                    if (value == 'admin') {
                        that.tips = "该用户名已经被占用，请更换一个"
                    } else {
                        that.tips = "该用户名可以使用"
                    }
                }, 2000);
            },
            click_tab: function(e, index)
            {
                this.show_index = index;
            },
            trigger_click: function(e, a, b){
                console.log(e);
                console.log(a);
                console.log(b);
                alert(this.msg);
            }
        }
    });
</script>
</html>